<template>
	<div style="width: 100%;">


		<el-card style="width:98%;float: left;margin-left: 1%;margin-top: 20px">
            <template #header>
            <div class="card-header">
                <h2>统计结果</h2>
            </div>
            </template>

            <el-row :gutter="20">
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel user-reg suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span id="user_reg_number" style="color:#9933FF">{{ tong.order_sum??0 }}</span>
                                    <div class="content-right">订单数量</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel file suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span id="file_number2" style="color:#FF33CC"><b style="font-size: 8px;">¥</b>{{ tong.order_sum_money??0 }}</span>
                                    <div class="content-right">订单金额</div>
                                </div>

                            </div>
                        </div>
                    </el-col>

                    <el-col :sm="12" :lg="3">
                        <div class="small-panel addons suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span id="addons_number" style="color:#00CC00">{{ tong.user_sum_pay??0 }}</span>
                                    <div class="content-right">付款总人数</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel user-reg suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span id="user_reg_number" style="color:#CCCC00">{{ tong.user_sum  ?? 0}}</span>
                                    <div class="content-right">总用户</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel file suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span id="file_number" style="color:#FF9900">{{ tong.order_daifa??0 }}</span>
                                    <div class="content-right">待发货订单</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel file suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span id="file_number" style="color:#FF9900">{{ tong.order_success??0 }}</span>
                                    <div class="content-right">交易完成订单</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel users suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span id="users_number" style="color:#009999">{{ tong.order_tui??0 }}</span>
                                    <div class="content-right">申请退款订单</div>
                                </div>

                            </div>
                        </div>
                    </el-col>
                    <el-col :sm="12" :lg="3">
                        <div class="small-panel addons suspension">
                            <div class="small-panel-content">
                                <div class="content-left">

                                    <span ref="myDiv" id="addons_number" style="color:#996600;" :class="{ 'firstClass': true, 'secondClass': isWidthExceeded }">{{ tong.order_tuied ?? 0 }}</span>
                                    <div class="content-right">已退款订单</div>
                                </div>

                            </div>
                        </div>
                    </el-col>

                </el-row>


        </el-card>

        <el-card style="width:98%;float: left;margin-left: 1%;margin-top: 15px;">
            <template #header>
            <div class="card-header">
                <h2>近15日销售情况</h2>
            </div>
            </template>
            <div id='showorders_sale' style='width:100%; height:300px'></div>

        </el-card>


        <el-card style="width: 48.5%;float: left;margin-left: 1%;margin-top: 15px;">
            <template #header>
            <div class="card-header">
                <h2>月份销售统计</h2>
            </div>
            </template>
            <div id='showorders_month' style='width:100%; height:300px'></div>
        </el-card>

        <el-card style="width: 48.5%;float: left;margin-left: 1%;margin-top: 15px;">
            <template #header>
            <div class="card-header">
                <h2>订单状态统计</h2>
            </div>
            </template>
            <div id='showorders_os' style='width:100%; height:300px'></div>

        </el-card>





	</div>

</template>

<script>

    import scSelectFilter from '@/components/scSelectFilter'
	import * as echarts from 'echarts';
	export default {
		name: 'static_order',
		components: {
            scSelectFilter,
			echarts
		},
		data() {
			return {
				tong:[],
				month_sales:[]
			}
		},
        mounted() {
			 this.getdata()

		},
		methods: {
			echart(v = []){
				    // 基于准备好的dom，初始化echarts实例
				    var chartDom = document.getElementById('showorders_sale');
				    var myChart = echarts.init(chartDom);
				    // 指定图表的配置项和数据
				    var option;
				    option = {
				        tooltip: {
				            trigger: 'axis'
				        },
				        legend: {
				            data: ['订单量', '订单额']
				        },
				        grid: {
				            left: '3%',
				            right: '4%',
				            bottom: '3%',
				            containLabel: true
				        },
				        toolbox: {
				            feature: {
				                saveAsImage: {}
				            }
				        },
				        xAxis: {
				            type: 'category',
				            boundaryGap: false,
				            data: v.date,
				            //设置字体倾斜
				            axisLabel: {
				                interval: 0,
				                rotate: 0,
				                //倾斜度 -90 至 90 默认为0
				                // margin: 9,
				                textStyle: {
				                    color: "#666",
				                    size:"10px"
				                }
				            }
				        },
				        yAxis: {
				            type: 'value'
				        },
				        series: [

				            {
				                name: '订单金额',
				                type: 'line',
				                stack: 'Total',
				                data:v.money
				            }
				        ]
				    };


				    option && myChart.setOption(option);
			},
			echart_month(){
				    // 基于准备好的dom，初始化echarts实例
				    var chartDom = document.getElementById('showorders_month');
				    var myChart = echarts.init(chartDom);
				    // 指定图表的配置项和数据
				    var option;
				    option = {
				        tooltip: {
				            trigger: 'axis'
				        },
				        legend: {
				            data: ['销售额']
				        },
				        xAxis: {
				            type: 'category',
				            data: this.month_sales['month']
				        },
				        yAxis: {
				            type: 'value'
				        },
				        series: [
				            {
				            data: this.month_sales['money'],
				            type: 'bar',
				            name:'销售额'
				            }
				        ]
				    };


				    option && myChart.setOption(option);
			},
			echart_os(){
				    // 基于准备好的dom，初始化echarts实例
				        var chartDom = document.getElementById('showorders_os');
				        var myChart = echarts.init(chartDom);
				        // 指定图表的配置项和数据
				        var option;
				        option = {
				                // title: {
				                //     text: 'Referer of a Website',
				                //     subtext: 'Fake Data',
				                //     left: 'center'
				                // },
				                tooltip: {
				                    trigger: 'item'
				                },
				                legend: {
				                    orient: 'vertical',
				                    left: 'left'
				                },
				                series: [
				                    {
				                    name: 'Access From',
				                    type: 'pie',
				                    radius: '50%',
				                    data: [
				                        { value: 1048, name: '待付款' },
				                        { value: 735, name: '待发货' },
				                        { value: 580, name: '待收货' },
				                        { value: 484, name: '申请退款' },
				                        { value: 300, name: '已退款' },
				                        { value: 1300, name: '已完成' }
				                    ],
				                    emphasis: {
				                        itemStyle: {
				                        shadowBlur: 10,
				                        shadowOffsetX: 0,
				                        shadowColor: 'rgba(0, 0, 0, 0.5)'
				                        }
				                    }
				                    }
				                ]
				        };


				        option && myChart.setOption(option);
			},
			async getdata(){
				var res = await this.$API.system.universal.handle.post({},'/order/statics');
				if(res.code == 200){
					 this.tong = res.data
					 this.month_sales = res.month_sales
					 this.echart(res.latest_day)
					 this.echart_month()
					 this.echart_os()
				}else{
					this.$alert(res.message, "提示", {type: 'error'})
				}
			},

            refresh(){
                this.$refs.table.reload()
            }
		}

	}
</script>

<style>
.content-left{
    text-align: center;
}
.content-left span{
    font-size: 24px;
    font-weight: bold;
}
.content-right{
    font-size: 14px;
    margin-top: 10px;
}
.card-header h2{
	font-size: 18px;
}
</style>
